<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录界面</title>

    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        .login-container {
            max-width: 400px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .login-form {
            display: flex;
            flex-direction: column;
        }

        .login-form input[type="text"],
        .login-form input[type="password"] {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .login-form input[type="submit"] {
            width: 100%;
            padding: 10px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>

    <script>
        function error0() {
            alert("验证码错误，请重新输入")
        }

        function error1() {
            alert("用户名错误，请重新输入")
        }

        function error2() {
            alert("密码错误，请重新输入")
        }
    </script>
</head>
<body>
<div class="login-container">

    <c:choose>
        <c:when test="${Error == 0}">
            <script>
                error0()
            </script>
        </c:when>
        <c:when test="${Error == 1}">
            <script>
                error1()
            </script>
        </c:when>
        <c:when test="${Error == 2}">
            <script>
                error2()
            </script>
        </c:when>

    </c:choose>
    <h2>登录</h2>
    <form class="login-form" action="Login" method="POST">
        <!-- 验证码输入框和刷新按钮 -->
        <div class="captcha-container">
            <img id="captcha-img" src="./CaptchaService">
            <input type="button" onclick="refreshCaptcha()" value="刷新">
            <input type="text" name="captchaInput" placeholder="验证码">
        </div>
        <!-- 用户名和密码输入框 -->
        <input type="text" name="username" placeholder="用户名" value="${name}">
        <input type="password" name="password" placeholder="密码" value="${password}">
        <%--         required--%>
        <!-- 提交按钮 -->
        <button type="submit" id="submit">登录</button>
    </form>
</div>
<script>
    function refreshCaptcha() {
        // 重新加载验证码图像的路径，以刷新验证码图像和验证码值。
        document.getElementById('captcha-img').src = "<c:url value="/CaptchaService"/>";
    }

    function checkInputNotEmpty() {
        const captchaInput = document.querySelector("input[name=captchaInput]");
        const username = document.querySelector("input[name=username]");
        const password = document.querySelector("input[name=password]");
        // 获取输入框的值
        const captchaValue = captchaInput.value.trim(); // 使用trim()去除首尾空格
        const nameValue = username.value.trim(); // 使用trim()去除首尾空格
        const pwdValue = password.value.trim(); // 使用trim()去除首尾空格

        // 判断输入框的值是否为空
        if (captchaValue === '') {
            // 如果为空，则弹出提示
            alert('验证码输入框不能为空！');
            // 阻止表单提交或执行其他操作
            return false;
        }
        // 判断输入框的值是否为空
        if (nameValue === '') {
            // 如果为空，则弹出提示
            alert('用户名输入框不能为空！');
            // 阻止表单提交或执行其他操作
            return false;
        }
        // 判断输入框的值是否为空
        if (pwdValue === '') {
            // 如果为空，则弹出提示
            alert('密码输入框不能为空！');
            // 阻止表单提交或执行其他操作
            return false;
        }
        // 如果不为空，则返回true，表示可以继续执行其他操作
        return true;
    }

    // 使用示例
    // 假设您有一个id为'myInput'的输入框
    let submit = document.getElementById('submit');

    // 您可以在需要的时候调用这个函数，比如在表单提交时
    submit.addEventListener('click', function (e) {
        if (!checkInputNotEmpty()) {
            // 阻止表单提交
            e.preventDefault();
        }
    });

</script>


</body>
</html>
